<template>
	<!-- 查询 -->
	<PageContainer>
		<div class="search-container">
			<n-button @click="search">查询</n-button>
		</div>
		<div class="container">
			<BasicTable ref="basicTable" :title="'部门列表'" :columns="columns" :default-expand-all="false" :row-key="rowKey" :pagination="{show:false}"
				:loadUrl="getDepartList">
				<template v-slot:toolRight>
					<n-button type="primary" class="mr-10" size="tiny" @click="addOrEditDepart(null,true)">新增</n-button>
				</template>
			</BasicTable>
		</div>
		<DepartDrawer ref="departDrawer" @refresh="search"></DepartDrawer>
	</PageContainer>
</template>

<script setup lang="ts">
	import { reactive, ref,h } from 'vue';
	import { BasicTable } from '@/components/Common/BasicTable';
	import DepartDrawer from '@/views/system/depart/components/DepartDrawer.vue';
	import { getDepartList } from '@/api/system';
	import { NButton, useMessage } from 'naive-ui'
	import type { DataTableColumns } from 'naive-ui'
	import { RowData } from 'naive-ui/es/data-table/src/interface';
	import PageContainer from '@/components/Common/PageContainer/index.vue'
	const message = useMessage()
	const rowKey = (row : RowData) => row.id
	const columns:DataTableColumns = reactive([
		{
			title: '部门名称',
			key: 'depart_name'
		},
		{
			title: '部门描述',
			key: 'depart_details'
		},
		{
			title: '排序',
			key: 'sort'
		},
		{
			title: '操作',
			key: 'actions',
			render(row) {
				return  [
					h(
						NButton,
						{
							size: 'tiny',
							type: 'primary',
							onClick: () => addOrEditDepart(row, true)
						},
						{ default: () => '新增' }
					),
					h(
						NButton,
						{
							size: 'tiny',
							class: 'ml-10',
							type: 'primary',
							onClick: () => addOrEditDepart(row, false)
						},
						{ default: () => '编辑' }
					),
					h(
						NButton,
						{
							size: 'tiny',
							class: 'ml-10',
							type: 'error',
							onClick: () => deleteDepart(row)
						},
						{ default: () => '删除' }
					)
				]
			}
		}
	])
	const basicTable = ref(null)
	const params = {
		'depart_name': 'zh'
	}
	/**
	 * 搜索部门
	 */
	function search() {
		basicTable.value?.initData(params)
	}
	const departDrawer = ref(null)
	/**
	 * 添加 | 修改部门
	 */
	function addOrEditDepart(row:RowData | null,flag: Boolean | null){
		departDrawer.value?.open(row,flag)
	}
	/**
	 * 删除部门
	 */
	function deleteDepart(row:RowData){
		message.success('删除成功')
	}
</script>

<style lang="scss" scoped>
	@mixin bg-border{
		padding: 10px;
		background-color: #fff;
		border-radius: 5px;
	} 
	.search-container{
		@include bg-border();
		margin-bottom: 10px;
	}
	.container {
		height: calc(100% - 30px);
		overflow:hidden;
		padding:10px;
		background: #fff;
	}
</style>